<template>
	<view class="classify">
		<view class="button-list">
			<button class="mini-btn" type="primary" size="mini" :loading="isLoading" @click="onButton">刷新</button>
			<picker mode="selector" :range="items" @change="onPickerChange">
				<view class="picker">
					口味：{{ selectedItem||'随便' }}
				</view>
			</picker>
		</view>
		<view class="text-box">
			<text>热量：{{menuHot}}千卡</text><br>
			<text>运动建议：{{menuHot>1700?'跑步半小时':'散步十分钟'}}</text>
		</view>
		<block v-for="(classifyItem,classifyIndex) in menuTimeListData" :key="classifyIndex">
			<classify-list v-if="selectedItem==='随便'" :title="classifyItem.menuTime"
				:classifyListData="getRandomHeroes(classifyItem.list)"></classify-list>
			<classify-list v-if="selectedItem==='清淡'" :title="classifyItem.menuTime"
				:classifyListData="classifyItem.list.slice(0,2)"></classify-list>
			<classify-list v-if="selectedItem==='偏辣'" :title="classifyItem.menuTime"
				:classifyListData="classifyItem.list.slice(2,4)"></classify-list>
		</block>
	</view>
</template>

<script>
	import imgTitle from '../../components/imgTitle.vue'
	import classifyList from '../../components/classifyList.vue'
	export default {
		components: {
			classifyList,
			imgTitle
		},
		data() {
			return {
				classifyListData: [],
				items: ['随便', '清淡', '偏甜', '偏辣'],
				selectedItem: '随便', // 当前选择的项，
				menuTypeList: [],
				menuHot: 1537,
				isLoading: false,
				menuTimeListData: [],
				menuTimeList: ['早餐', '午餐', '晚餐'],
				menuTimeListInfo: ['营养与动力的早餐，让你精神靓丽一整天', '营养午餐，视觉与味觉的双重享受', '让可口的晚餐安抚疲劳一天的身体']
			}
		},
		onLoad: async function() {
			this.menuTypeList = await this.getMenutypeList()
			await Promise.all((this.menuTypeList.map((type, tabIndex) => {
				return this.$api.getMenuBytype({
					menuType: type.menutypeTitle
				})
			}))).then(res => {
				this.classifyListData = res.map(item => {
					return {
						menuType: item.menuType,
						list: item.data
					}
				})
			})

			await Promise.all((this.menuTimeList.map((type, tabIndex) => {
				return this.$api.getMenuByTime({
					menuTime: type
				})
			}))).then(res => {
				this.menuTimeListData = res.map(item => {
					return {
						menuTime: item.menuTime,
						list: item.data
					}
				})
				console.log(this.menuTimeListData);
			})
		},
		methods: {
			getMenutypeList() {
				return this.$api.getMenutypeList().then(res => {
					if (res.code) {
						return res.data
					}
				})
			},
			onPickerChange(e) {
				const selectedIndex = e.detail.value; // 获取选中的索引
				this.selectedItem = this.items[selectedIndex]; // 获取选中的值
			},
			onButton() {
				this.isLoading = true;
				setTimeout(() => {
					this.isLoading = false;
				}, 500)
				this.menuHot = Math.floor(Math.random() * (2500 - 1000 + 1)) + 1000;
			},
			getRandomHeroes(arr) {
				// 随机生成两个不重复的索引
				let index1 = Math.floor(Math.random() * arr.length); // 第一个随机索引
				let index2;

				// 确保第二个索引与第一个不同
				do {
					index2 = Math.floor(Math.random() * arr.length);
				} while (index2 === index1);

				// 返回两个随机选择的英雄
				return [arr[index1], arr[index2]];
			}

		}
	}
</script>

<style>
	.text-box {
		padding: 0px 20px;
		background-color: white;
		padding-top: 8px;
	}

	.button-list {
		display: flex;
		background-color: white;
		align-items: center;
		padding: 20px;
		padding-bottom: 0px;
	}

	.mini-btn {
		margin-left: 0px;
	}

	.picker {
		padding: 4px;
		background-color: white;
		border: 1px solid #1aad19;
		width: 70px;
		border-radius: 5px;
		height: 30px;
		text-align: center;
	}
</style>